<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-text class="mx-1" type="primary"
          >共有{{ list.length }}项,还剩下{{ unDO }}项</el-text
        >
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="24">
        <el-button @click="show('all')">全部</el-button>
        <el-button @click="show('done')">已完成</el-button>
        <el-button @click="show('undo')">待完成</el-button>
        <el-button @click="show('clear')">清空任务</el-button>
      </el-col>
    </el-row>
  </div>
  <br />
</template>

<script>
export default {
  props: {
    list: Array,
  },
  data() {
    return {
      list1: this.list,
      currentPage: 1,
      pageSize: 5,
    };
  },
  methods: {
    show(flag) {
      this.$emit("show", flag);
    },
    handleCurrentChange(page) {
      console.log(page);
    },
  },
  computed: {
    unDO() {
      let count = 0;
      this.list.map((v) => {
        if (v.state == false) {
          count++;
        }
      });
      return count;
    },
    showPager() {
      this.list1.length;
      return true;
    },
  },
};
</script>

<style scoped>
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
</style>
